<!-- 区域气泡组件 -->
<template>
  <bm-overlay ref="customOverlay" class="zone" pane="labelPane" @draw="draw">
    <div>
      <!-- <p>{{text.name}}</p> -->
      <!-- <p>{{text.size}}处</p> -->
    </div>
  </bm-overlay>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["text", "position", "active", "count"],
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload();
      },
      deep: true
    },
    count: {
      handler() {},
      deep: true
    }
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //方法集合
  methods: {
    //地图发生改变时
    draw({ el, BMap, map }) {
      // console.log("发生改变时", el);
      const { lng, lat } = this.position;
      // console.log("地图改变 时", lng, lat);
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      // if (this.count < 100) {
      //   let alpha = this.count / 100;
      //   el.style.backgroundColor = "rgba(58, 126, 255," + alpha + ")";
      // } else {
      //   el.style.backgroundColor = "rgba(58, 126, 255,1)";
      // }rgba(24, 247, 10, 0.3)
      if (this.count > 0 && this.count <= 300) {
        el.style.backgroundColor = 'rgba(255, 187, 187)';
      } else if (this.count > 300 && this.count < 500) {
        el.style.backgroundColor = 'rgba(255, 95, 95)';
      } else if (this.count >= 500 && this.count < 10000) {
        el.style.backgroundColor = 'rgba(255, 20, 20)';
      } else if (this.count >= 10000 && this.count < 50000) {
        el.style.backgroundColor = 'rgba(198, 0, 0)';
      } else {
        el.style.backgroundColor = 'rgba(142, 17, 17)';
      }
      // if (this.count > 0 && this.count < 50) {
      //   el.style.backgroundColor = "rgba(231,30,26)";
      // } else {
      //   el.style.backgroundColor = "rgba(245,216,80)";
      // }
      el.style.left = pixel.x - 10 + "px";
      el.style.top = pixel.y - 10 + "px";
    }
    //地图初始化
    // init({ el, BMap, map }) {
    //   console.log("初始化", el);
    //   const { lng, lat } = this.position;
    //   const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
    //   el.style.left = pixel.x - 42 + "px";
    //   el.style.top = pixel.y - 42 + "px";
    // }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
$alpha: 0.9;
.zone {
  transition: background-color 0.15s ease-in-out;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  // background-color: rgba(58, 126, 255, $alpha);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  text-align: center;
  // padding: 20px;
  // padding: 10px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 4px #999;
  box-sizing: border-box;

  &:hover {
    z-index: 1;
    background-color: #ffb62e;
    color: #fff;
    cursor: pointer;
  }

  div {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: space-between;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>